<template>
    <div class="common-layout">
        <el-container>
            <el-header>
                <Header></Header>
            </el-header>
            <el-container>
                <el-aside width="200px">
                    <Menu></Menu>
                </el-aside>
                <el-main>
                    <RouterView></RouterView>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script setup>
import { RouterView } from 'vue-router';
import Menu from '../components/Menu.vue';
import Header from '../components/Header.vue'

</script>




<style scoped>
.common-layout {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.el-container {
    /* min-height: 100vh; */
    height: 100%;
    /* display: flex; */
    /* flex-direction: column; */
}

.el-header {
    flex-shrink: 0;
    height: 60px;
    /* 假设Header的高度为60px */
}

.el-aside {
    flex-shrink: 0;
    width: 200px;
    height: calc(100vh - 60px);
    /* 考虑到header的高度 */
    /* overflow-y: auto; 添加滚动条以应对内容过多的情况 */
    /* box-sizing: border-box; */
}

.el-main {
    flex-grow: 1;
    overflow-y: auto;
}

/* Menu组件内部样式 */



</style>
  